import { PageContainer } from '@ant-design/pro-components';
import React, { useEffect, useState } from 'react';
import { Avatar, Button, Card, Descriptions, Divider, Form, Input, List, message, Space, Spin } from 'antd';
import { TaobaoOutlined } from '@ant-design/icons';
import { useParams } from '@umijs/max';
import { getInterfaceInfoByIdUsingGET, invokeInterfaceInfoUsingPOST } from '@/services/linapi-back/interfaceInfoController';

  const interfaceDetail: React.FC = () => {
    const [loading,setLoading] = useState(false);
    const [invokeLoading,setInvokeLoading] = useState(false);
    const [data,setData] = useState<API.InterfaceInfo>();
    const [invokeRes,setInvokeRes] = useState<any>();
    const params=useParams();

    const [form] = Form.useForm();

    const onFinish = async (values:any) => {
      if(!params.id){
        message.error("接口不存在！");
        return;
      }
      setInvokeLoading(true);
      try {
        const res = await invokeInterfaceInfoUsingPOST({
          ...values,
          id:params.id
        });
        setInvokeRes(res.data);
        message.success('请求成功！');
      } catch (error:any) {
        message.error('操作失败，'+ error.message);
      }
      setInvokeLoading(false);
    };

    const loadData=async ()=>{
      setLoading(true);
      if(!params.id){
        message.error("参数不存在！");
        return;
      }
      try{
        const res = await getInterfaceInfoByIdUsingGET({
          id:Number(params.id)
        });
        setData(res.data);
      }catch(error : any){
        message.error("请求失败，"+error.message);
      }
      setLoading(false);
    }
    useEffect(() => {
      loadData();
    }, []);
  return (
    <PageContainer title="接口信息">
      <Card>
        {data ? (
            <Descriptions title={data?.name} column={1}>
                <Descriptions.Item label="描述">{data?.description}</Descriptions.Item>
                <Descriptions.Item label="请求地址">{data?.url}</Descriptions.Item>
                <Descriptions.Item label="请求方法">{data?.method}</Descriptions.Item>
                <Descriptions.Item label="请求头">{data?.responseHeader}</Descriptions.Item>
                <Descriptions.Item label="响应头">{data?.requestHeader}</Descriptions.Item>
                <Descriptions.Item label="请求参数">{data?.requestParams}</Descriptions.Item>
                <Descriptions.Item label="接口状态">{data?.status ? '开启' : '关闭'}</Descriptions.Item>
                <Descriptions.Item label="创建时间">{data?.createTime}</Descriptions.Item>
                <Descriptions.Item label="更新时间">{data?.updateTime}</Descriptions.Item>
            </Descriptions>
        ) : (<>接口不存在</>)}
      </Card>
      <Divider />
      <Card title="在线测试">
        <Form
        layout="vertical"
        form={form}
        onFinish={onFinish}
        autoComplete="off"
        >
        <Form.Item
            name="requestParams"
            label="请求参数"
        >
            <Input.TextArea />
        </Form.Item>
        <Form.Item>
        <Space>
          <Button type="primary" htmlType="submit">
            调用
          </Button>
        </Space>
      </Form.Item>
        </Form>
      </Card>
      <Divider />
      <Card title="返回结果">
        <Spin spinning={invokeLoading}></Spin>
            {invokeRes}
      </Card>
    </PageContainer>
  );
};

export default interfaceDetail;
